<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>
  
  <script>
export default {
  // props:['w']
//   // 1、基础写法（类型校验）   
//   props:{
//     w:Number // 类型根据需求加 Number String Boolean Array Object Function
//   }

    // 2、完整写法（类型、默认值、非空、自定义校验）
    props:{
        // w 校验的属性名（我要校验谁）
        w: {
            // 我要校验什么东西。。。。。。
            type:Number,
            // require:true, // 是否必填 判断非空
            default:0, // 默认值
            validator(val){
                // 自定义校验逻辑
                // return 是否通过校验
               if(val <0 || val > 100) {
                console.error('传入的范围必须是0-100之间');
                return false
               } else {
                return true
               }
            }
        }
    }
};
</script>
  
  <style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>